<template>
  <canvas ref="liveCanvas"></canvas>
   
  </template>
   
  <script setup >
  import {ref,onMounted,onBeforeUnmount} from  "vue";
  import * as PIXI from "pixi.js"
  import { Live2DModel } from "pixi-live2d-display/cubism4";
  console.log(Live2DModel,'===Live2DModel')
   
  window.PIXI =PIXI
  let app;
  let model;
  const liveCanvas=ref(null);
  onMounted(async ()=>{
    console.log(liveCanvas,'1111');
    app=new PIXI.Application({
      view:liveCanvas.value || undefined,
      autoStart:true,
      resizeTo:window,
      backgroundAlpha:0
    })
    // model = await Live2DModel.from('https://cdn.jsdelivr.net/gh/guansss/pixi-live2d-display/test/assets/haru/haru_greeter_t03.model3.json')
    model = await Live2DModel.from('./Mark/Mark.model3.json')
   
    app.stage.addChild(model);
    model.scale.set(0.1)
  });
  onBeforeUnmount(()=>{
    model?.destroy();
    app?.destroy()
  })
   
  </script>
   
  <style scoped>
   
  </style>